<template>
  <div class="dashboard">
    <h2>仪表板</h2>
    <div class="stats-cards">
      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-number">1,234</div>
          <div class="stat-label">用户总数</div>
        </div>
      </el-card>
      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-number">567</div>
          <div class="stat-label">今日访问</div>
        </div>
      </el-card>
      <el-card class="stat-card">
        <div class="stat-content">
          <div class="stat-number">89%</div>
          <div class="stat-label">转化率</div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
// 仪表板逻辑
</script>

<style scoped>
.dashboard {
  padding: 20px;
}
.dashboard h2 {
  margin-bottom: 20px;
  color: var(--text-color);
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.stat-card {
  text-align: center;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: var(--primary-color);
  margin-bottom: 8px;
}

.stat-label {
  color: var(--text-color);
  opacity: 0.8;
}
</style>